<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
    <script src="../js/echarts.min.js"></script>
    <style type="text/css">
        #main{
            width: 60%;
            height:360px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" ></div>
<script type="text/javascript">

    //基于准备好的DOM，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //指定图表的配置项和数据
    var option = {
        title:{
            text:'各时段运动',
            textStyle:'normal',
            show:true
        },
        //提示框组件
        tooltip:{
            //坐标轴触发，主要用于柱状图，折线图等
            trigger:'axis'
        },
        //右上角工具条
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },//目前还不知道有啥用
                dataView: { show: true, readOnly: true },//数据视图
                magicType: { show: true, type: ['line', 'bar'] },//折线与柱状的切换
                restore: { show: true },//重置
                saveAsImage: { show: true }//保存为图片
            }
        },
        //图例
        legend:{
            data:['人数']
        },
        color : 'rgb(12, 184, 138)',
        lineStyle : {
            //设置折线粗细
            width : '4'
        },
        //横轴
        xAxis:{
            show:true,
            position:'bottom',
            // type:'category',
            name:'单位：时刻',
            nameLocation:'end',
            // nameTextStyle:''
            data:["00","01","02","03","04","05","06","07","08"]

        },

        //纵轴
        yAxis:{
            name:'单位：人'
        },
        //系列列表。每个系列通过type决定自己的图表类型
        series:[{
            name:'人数',
            //折线图
            type:'line',
            data:[0, 0, 0, 0, 6, 19,13,10]
        }]
    };
    //使用刚指定的配置项和数据显示图表
    myChart.setOption(option);

</script>
</body>
</html>
